<template>
    <div id="app-container">
        <router-view class="router-container"/>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Action,
        State
    } from 'vuex-class';

    import {
        Component
    } from 'vue-property-decorator';

    import {
        LoginUser
    } from './../state/interface/user';

    import * as types from './../state/types/user';

    @Component({ name:`App` })
    export default class App extends Vue {
        @Action(types.onLogin) onLogin!: Function;
        @State(({ user }) => user.loginUser || {}) loginUser!:LoginUser;

        get token():string {
            const {
                token
            } = this.loginUser ;
            return token;
        }

        mounted() {
            if(!!this.token) {
                this.onLogin(this.token)
            }
        }
    }
</script>

<style scoped lang="scss">
    #app-container {
        position: absolute;
        height: 100%;
        left: 0;
        right: 0;
        max-width: 640px;
        margin: auto;
        background-color: #fff;
    }
    .router-container {
        width: 100%;
        height: 100%;
    }
</style>